<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电商管理前端</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../styles/common.css" />
    <link rel="stylesheet" href="../styles/index.css" />
    <link rel="stylesheet" href="../styles/icon/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/all.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-JD-index.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-cart.css" />
    <style type="text/css">
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 100px;
            margin: 0;
        }

        .el-carousel__item:nth-child(4n) {
            background-image: url(../images/show1.png);
            background-repeat: no-repeat;
        }
        .el-carousel__item:nth-child(4n+1) {
            background-image: url(../images/show2.png);
            background-repeat: no-repeat;
        }
        .el-carousel__item:nth-child(4n+2) {
            background-image: url(../images/show3.png);
            background-repeat: no-repeat;
        }
        .el-carousel__item:nth-child(4n+3) {
            background-image: url(../images/show4.png);
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="app">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <span v-if="user===''">请<a href="/pages/userlogin.html">登录</a></span>
                        <span v-else>{{user}},欢迎你</span>
                        <span><a href="register.html">免费注册</a></span>
                    </ul>
                    <div class="fr typelist" style="margin-top: -29px">
                        <ul class="types" style="margin-left: 390px">
                            <li class="f-item">
                                <span>
                                    <a href="shopping.html">首页</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="cart.html">我的购物车</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="home.html">个人信息</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="/logout">退出</a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <img src="../images/logo2.png" style="margin-left: -40px; height: 200px; width: 250px;margin-top: -30px;">
                    </div>
                    <div class="yui3-u Rit searchArea" style="margin-right: -100px;margin-top: 72px;font-size: 40px;font-family: '宋体';color: red;">
                        欢迎来到未来生活！
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="py-container" style="margin-top: 70px;text-align: center">
        <div class="yui3-g SortList" style="margin-left: 100px">
            <div class="yui3-u Center banerArea">
                <!--banner轮播-->
                <div class="block">
                    <el-carousel style="width: 800px" height="470px">
                        <el-carousel-item v-for="item in 4" :key="item">
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
        <div class="yui3-u Right" style="float: right;margin-top: -240px">
            <img src="../images/arrow.png" style="height: 200px;width: 200px;margin-top: -200px">
            <div class="news">
                <h4>
                    <a href="../pages/shopping.html" style="font-size: 25px">单击此处进入购物</a>
                </h4>
            </div>
        </div>
    </div>
    <div class="like">
        <div class="py-container">
            <div class="title">
                <h3 class="fl">猜你喜欢</h3>
            </div>
            <div class="bd">
                <ul class="clearfix yui3-g Favourate picLB" id="picLBxxl">
                    <li class="yui3-u-1-6">
                        <dl class="picDl huozhe">
                            <dd>
                                <img src="../images/1.jpg" alt="" />
                                <div class="like-text">
                                    <p>法国进口小面包</p>
                                </div>
                            </dd>
                        </dl>
                    </li>
                    <li class="yui3-u-1-6">
                        <dl class="picDl jilu">
                            <dd>
                                <img src="../images/2.jpg" alt="" />
                                <div class="like-text">
                                    <p>好丽友派</p>
                                </div>
                            </dd>
                        </dl>
                    </li>
                    <li class="yui3-u-1-6">
                        <dl class="picDl tuhua">
                            <dd>
                                <img src="../images/3.jpg" alt="" />
                                <div class="like-text">
                                    <p>臭豆腐</p>
                                </div>
                            </dd>
                        </dl>
                    </li>
                    <li class="yui3-u-1-6">
                        <dl class="picDl huozhe">
                            <dd>
                                <img src="../images/4.jpg" alt="" />
                                <div class="like-text">
                                    <p>腐乳</p>
                                </div>
                            </dd>
                        </dl>
                    </li>
                    <li class="yui3-u-1-6">
                        <dl class="picDl jilu">
                            <dd>
                                <img src="../images/5.jpg" alt="" />
                                <div class="like-text">
                                    <p>花生</p>
                                </div>
                            </dd>
                        </dl>
                    </li>
                    <li class="yui3-u-1-6">
                        <dl class="picDl tuhua">
                            <dd>
                                <img src="../images/6.jpg" alt="" />
                                <div class="like-text">
                                    <p>瓜子</p>
                                </div>
                            </dd>
                        </dl>
                    </li>
                    <li class="yui3-u-1-6">
                        <dl class="picDl huozhe">
                            <dd>
                                <img src="../images/7.jpg" alt="" />
                                <div class="like-text">
                                    <p>小泡芙</p>
                                </div>
                            </dd>
                        </dl>
                    </li>
                    <li class="yui3-u-1-6">
                        <dl class="picDl jilu">
                            <dd>
                                <img src="../images/8.jpg" alt="" />
                                <div class="like-text">
                                    <p>老干妈</p>
                                </div>
                            </dd>
                        </dl>
                    </li>
                    <li class="yui3-u-1-6">
                        <dl class="picDl tuhua">
                            <dd>
                                <img src="../images/9.jpg" alt="" />
                                <div class="like-text">
                                    <p>百事可乐</p>
                                </div>
                            </dd>
                        </dl>
                    </li>
                    <li class="yui3-u-1-6">
                        <dl class="picDl huozhe">
                            <dd>
                                <img src="../images/10.jpg" alt="" />
                                <div class="like-text">
                                    <p>可口可乐</p>
                                </div>
                            </dd>
                        </dl>
                    </li>
                    <li class="yui3-u-1-6">
                        <dl class="picDl jilu">
                            <dd>
                                <img src="../images/11.jpg" alt="" />
                                <div class="like-text">
                                    <p>牛角包</p>
                                </div>
                            </dd>
                        </dl>
                    </li>
                    <li class="yui3-u-1-6">
                        <dl class="picDl tuhua">
                            <dd>
                                <img src="../images/12.jpg" alt="" />
                                <div class="like-text">
                                    <p>蛋挞</p>
                                </div>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/login.js"></script>
<script type="text/javascript" src="../js/all.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data (){
            return {
                user:'',
            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            axios.get("/user/getUsername").then((res) => {
                if(res.data.flag){
                    this.user=res.data.data;
                }
            });
        },
        methods: {
        }
    })
</script>
</html>